import React, {Component} from 'react'
import MineVM from 'cvm/mine'
import './index.less'
import { observer } from 'mobx-react/custom'
import { NavLink as Link } from 'react-router-dom'

const IconHeader = observer(({ vm }) => {
  if (!vm.data) return <div />
  return (
    <Link to='/userInformation'>
      <div className='my-box flex-wrap'>
        <div className='flex-4 limit-name'>
          <img src={vm.data.Headimgurl} alt='' className='header' />
          <span>{vm.data.Nickname}</span>
        </div>
        <div className='flex-1 right-Arrow'>
          <img src={require('images/right.png')} alt='' />
        </div>
      </div>
    </Link>
  )
})

const Tabs = observer(({ vm }) => {
  if (!vm.data) return <div />
  return (
    <div className='post-container flex-wrap post-box'>
      <div className='flex-1 box-detail'>
        <Link to='/myPost'>
          <p>我的帖子</p>
          <p>{vm.data.PostCount}</p>
        </Link>
      </div>
      <div className='flex-1 box-detail'>
        <Link to='/replyMe'>
          <p>提及回复</p>
          <p>{vm.data.ReplyCount}</p>
        </Link>
      </div>
      <div className='flex-1 box-detail'>
        <Link to='/myBean'>
          <p>我的绿豆</p>
          <p>{vm.data.BeanCount}</p>
        </Link>
      </div>
    </div>
  )
})

const Items = observer(({ vm }) => {
  if (!vm.data) return <div />
  return (
    <div>
      <div className='reply-box post-box '>
        <Link to={'/myReply?' + vm.data.Headimgurl}>
          <div className='reply-box-detail'>
            <span>我的回复</span>
            <img src={require('images/right.png')} alt='' />
          </div>
        </Link>
        <Link to='/myCollection'>
          <div className='reply-box-detail'>
            <span>我的收藏</span>
            <img src={require('images/right.png')} alt='' />
          </div>
        </Link>
        <Link to='/systemMsg'>
          <div className='reply-box-detail'>
            <span>消息通知</span>
            <img src={require('images/right.png')} alt='' />
          </div>
        </Link>
        <Link to='/feedBack'>
          <div className='reply-box-detail'>
            <span>意见反馈</span>
            <img src={require('images/right.png')} alt='' />
          </div>
        </Link>
      </div>
      <div className='reply-box post-box'>
        <Link to='/about'>
          <div className='reply-box-detail'>
            <span>关于&nbsp;绿格子</span>
            <img src={require('images/right.png')} alt='' />
          </div>
        </Link>
      </div>
    </div>
  )
})

@observer
export default class Mine extends Component {
  vm = new MineVM(this.props)
  constructor (props) {
    super(props)
    window.document.title = '个人中心'
  }

  render () {
    return (
      <div>
        <IconHeader vm={this.vm} />
        <Tabs vm={this.vm} />
        <Items vm={this.vm} />
      </div>
    )
  }
}
